<script setup lang="ts">
import TheWelcome from '../components/TheWelcome.vue'
</script>

<template>
  <div class="common-layout">
    <el-container>
      
      <el-header >
        <div class="word">
        <h1><MyTable1/></h1>
      </div></el-header>
      <el-container>
        <el-aside width="600px">
          <div class="xyk-item">
          <div class="left-icon-box">
          <img src="../assets/th.jpg" alt="" srcset="" style="max-width:100%;height:auto;">
          </div>
          <div class="right-box">
         <div class="time">书籍名：红楼梦
          <a class="wenben" style="font-size:0.5px">简介：《红楼梦》，原名《石头记》，中国古代章回体长篇小说，中国古典四大名著之一。其通行本共120回，一般认为前</a> <br/>作者：曹雪芹
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a style="font-size:0.5px">80回是清代作家曹雪芹所著，后40回作者为无名氏，整理者为程伟伟元、高鹗。四大家族的兴衰为背景，以富贵公子贾宝</a>
        </div>
        <div style="color:red">价格200￥
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a style="font-size:0.5px">玉为视角，以贾宝玉与林黛玉、薛宝钗的爱情婚姻悲剧为主线，描绘了一些闺阁佳人的人生百态，展现了真正的人性美和</a>
        
        </div>
        <div style="font-size:0.5px"><a href="#">购买</a>&nbsp;&nbsp;&nbsp;<a href="#">加入购物车
        </a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a>悲剧美，是一部从各个角度展现女性美以及中国古代社会百态的史诗性著作。</a></div>
      
        </div>
      </div>
      <div class="xyk-item">
          <div class="left-icon-box">
          <img src="../assets/th3.jpg" alt="" srcset="" style="max-width:100%;height:auto;">
          </div>
          <div class="right-box">
         <div class="time">书籍名：西游记
          <a class="wenben" style="font-size:0.5px">简介：《西游记》是明代吴承恩创作的中国古代第一部浪漫主义章回体长篇神魔小说。该小说主要讲述了孙悟空出世跟随</a> <br/>作者：吴承恩
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a style="font-size:0.5px">菩提祖师学艺及大闹天宫后，遇见了唐僧、猪八戒、沙僧和白龙马，西行取经，一路上历经艰险，降妖除魔，经历了九九</a>
        </div>
        <div style="color:red">价格220￥
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a style="font-size:0.5px">八十一难，终于到达西天见到如来佛祖，最终五圣成真的故事。该小说以“玄奘取经”这一历史事件为蓝本，经作者的艺术</a>
        
        </div>
        <div style="font-size:0.5px"><a href="#">购买</a>&nbsp;&nbsp;&nbsp;<a href="#">加入购物车
        </a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a>加工，深刻地描绘出明代百姓的社会生活状况。</a></div>
      
        </div>
      </div>
      <div class="xyk-item">
          <div class="left-icon-box">
          <img src="../assets/th2.jpg" alt="" srcset="" style="max-width:100%;height:auto;">
          </div>
          <div class="right-box">
         <div class="time">书籍名：水浒传
          <a class="wenben" style="font-size:0.5px">简介：全书通过描写梁山好汉反抗欺压、水泊梁山壮大和受宋朝招安，以及受招安后为宋朝征战，最终消亡的宏大故事，</a> <br/>作者：施耐庵
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a style="font-size:0.5px">艺术地反映了中国历史上宋江起义从发生、发展直至失败的全过程，深刻揭示了起义的社会根源，满腔热情地歌颂了起义</a>
        </div>
        <div style="color:red">价格120￥
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a style="font-size:0.5px">英雄的反抗斗争和他们的社会理想，也具体揭示了起义失败的内在历史原因。</a>
        
        </div>
        <div style="font-size:0.5px"><a href="#">购买</a>&nbsp;&nbsp;&nbsp;<a href="#">加入购物车
        </a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a></a></div>
      
        </div>
      </div>
      <div class="xyk-item">
          <div class="left-icon-box">
          <img src="../assets/th1.jpg" alt="" srcset="" style="max-width:100%;height:auto;">
          </div>
          <div class="right-box">
         <div class="time">书籍名：三国演义
          <a class="wenben" style="font-size:0.5px">简介：《三国演义》可大致分为黄巾起义、董卓之乱、群雄逐鹿、三国鼎立、三国归晋五大部分，描写了从东汉末年</a> <br/>作者：罗贯中
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a style="font-size:0.5px">到西晋初年之间近百年的历史风云，以描写战争为主，诉说了东汉末年的群雄割据混战和魏、蜀、吴三国之间的政治和军</a>
        </div>
        <div style="color:red">价格180￥
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a style="font-size:0.5px">事斗争，最终司马炎一统三国，建立晋朝的故事。反映了三国时代各类社会斗争与矛盾的转化，并概括了这一时代的历史</a>
        
        </div>
        <div style="font-size:0.5px"><a href="#">购买</a>&nbsp;&nbsp;&nbsp;<a href="#">加入购物车
        </a>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <a>巨变，塑造了一群叱咤风云的三国英雄人物。</a></div>
      
        </div>
      </div>
        </el-aside>
        <el-main ><MyTable/></el-main>
      
        
      </el-container>
    </el-container>
  </div>
</template>
<style>
a1{color:rgba(159, 41, 233, 0.658);}
a1:hover{color:red;
  border-bottom: 1px solid #666;}

</style>
<style>
    .p1{
       color: rgb(214, 52, 52);       
      top: -20px;
      left: 20px;
            }
    .wz{
      width: 195px;
      height: 20px;
      background-color: red;
      margin-left: 700px;
      top:-50px;
      left: 20px;
	
	
      
    }
        </style>
<!--居中-->
<style>
  .word{  
    position:relative;
     left:20%;
     float:left;
    }
</style>
<!--图片格式-->
<style>
     .xyk-item{
    display: flex;
    border-bottom: 0.5px solid lightgrey;
}
 
.xyk-item .left-icon-box{
    flex: 0 0 100px;
}
 
.xyk-item .left-icon-box img{
    width: 80px;
    height: 80px;
    margin-left: 10px;
    margin-top: 1px;
}
.xyk-item .right-box{
    flex: 1;
}
 
.xyk-item .right-box .name{
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 20px;
    font-size: 14px;
    color: black;
 
    height: 40px;
    line-height: 20px;
    overflow: hidden;
    word-break: break-all;
}
 
.xyk-item .right-box .time{
    display: block;
    margin-top: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
}
.h2{
  text-decoration: underline;
}

</style>
<style>
.wenben{
  width: 30px;
  height: 40px;
  
  top:0px;
      left: 50px;
}

</style>
